<template>
    <div class="page-talk">
        <!-- 横幅 -->
        <div class="banner-section">
            <Banner banner="banner9" />
            <div class="text-box">
                <div class="user">
                    <Avatar :url="userInfo.avatar" width="50px" height="50px" />
                    <custom-text
                        color="#f7576c"
                        size="18px"
                        display="inline-block"
                        height="40px"
                    >
                        <span v-if="!token">未登录</span>
                    </custom-text>
                </div>

                <new-emojis ref="commentRef" @input="getContent">
                    <el-button
                        type="primary"
                        round
                        size="small"
                        @click="onSubmit(1)"
                    >
                        发表评论
                    </el-button>
                </new-emojis>
                <!-- <comment
                    ref="commentRef"
                    placeholder="想说点啥/或者给点什么意见"
                    @saveComment="onSubmit"
                ></comment> -->
            </div>
        </div>

        <!-- 留言部分 -->
        <div class="comment-section el-mx-1000">
            <comment-item
                v-for="(item, index) in comments.list"
                :key="item.id"
                :comment="item"
                :floor="index"
                @onClick="showReply"
            >
                <new-emojis
                    :ref="`commentRef${item.id}`"
                    v-show="item.id == isShow ? true : false"
                    @input="getContent"
                >
                    <el-button round size="small" @click="handleCancel">
                        取消
                    </el-button>
                    <el-button
                        type="primary"
                        round
                        size="small"
                        @click="onSubmit(2)"
                    >
                        回复
                    </el-button>
                </new-emojis>
                <!-- <comment
                    v-show="item.id == isShow ? true : false"
                    class="el-mg-20"
                    :cancel="true"
                    :level="2"
                    :ref="`commentRef${item.id}`"
                    :placeholder="'回复' + placeholder"
                    @onClick="cancelReply"
                    @saveComment="onSubmit"
                ></comment> -->
            </comment-item>

            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="comments.currentPage"
                :page-sizes="comments.pageSizes"
                :page-size="comments.pageSize"
                :layout="comments.layout"
                :total="comments.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { talk as Api } from "@/api";

export default {
    name: "talk",
    data() {
        return {
            isShow: "", // 显示影藏评论编辑框
            comment_id: "", // 当前评论id
            placeholder: "", // 占位符

            content: "", // 评论/回复内容

            comments: {
                list: [], // 列表
                currentPage: this.$localConfig.pagination.currentPage, // 默认从第一页开始
                pageSizes: this.$localConfig.pagination.pageSizes, // 每页多少条
                pageSize: this.$localConfig.pagination.pageSize, // 每页显示个数下拉选择器的选项设置
                layout: this.$localConfig.pagination.layout, // 组件布局，子组件名用逗号分隔
                total: 0, // 总数
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            let params = {
                per_page: this.comments.pageSize,
                page: this.comments.currentPage,
            };

            const { code, msg, data } = await this.$axios.$get(Api.getList, {
                params,
            });

            if (code == 200) {
                this.comments.list = data.list;
                this.comments.total = data.total;
            }
        },

        /* 打开回复输入框 */
        showReply(data) {
            this.isShow = data.parent.id;
            this.comment_id = data.child ? data.child.id : data.parent.id;
            this.placeholder = data.child
                ? data.child.user_name
                : data.parent.user_name;
        },

        // 获取回复内容
        getContent(value) {
            this.content = value;
        },

        /* 提交 */
        async onSubmit(level) {
            if (!this.content) return this.$msg.error("内容不能空");

            let params = {
                content: this.content,
                comment_level: level,
            };
            let api = Api.add;

            if (level == 2) {
                params.id = this.comment_id;
                api = Api.reply;
            }

            const { code, data, msg } = await this.$axios.$post(api, params);

            if (code == 200) {
                this.$msg.success(msg);
                this.handleCancel();
                this.getList();
            } else {
                this.$msg.error(msg);
            }
        },

        /* 关闭清空编辑框 */
        handleCancel() {
            if (this.isShow) {
                this.$refs[`commentRef${this.isShow}`][0].textarea = "";
            } else {
                this.$refs["commentRef"].textarea = "";
            }
            this.isShow = "";
        },

        handleCurrentChange(val) {
            this.comments.currentPage = val;
            this.getList();
        },
    },
    computed: {
        token() {
            return this.$store.state.token;
        },
        userInfo() {
            return this.$store.state.userInfo;
        },
    },
};
</script>

<style lang="less" scoped>
.banner-section {
    .text-box {
        display: flex;

        .user {
            margin-right: 15px;
            font-weight: bold;
        }
    }
}
.comment-section {
    margin-top: 60px;
    padding: 0 20px;
}
</style>